<template>
  <div class="centerBox">
    <div class="centerLogo">
      <!-- logo开始 -->
      <div class="logo">
        <div class="logo_left">
          <!-- <img src="../assets/img/logo.png" alt="图片获取失败"> -->
          <div class="logo_Name">
            <p>{{ $t("logoName") }}</p>
          </div>
        </div>
      </div>
      <div class="searchFromBox">
        <div class="language">
          <div class="languageAct" @click="languageGetPut(1)">
            中文&nbsp;
          </div>
          <div class="languageAct">
            |
          </div>
          <div class="languageAct" @click="languageGetPut(2)">
            &nbsp;English
          </div>
        </div>
        <div class="searchFrom">
          <input v-model="title" class="searchFromInput" placeholder="请输入关键字查询" type="text">
          <button class="buTton" @click="queryRet">
            搜索
          </button>
        </div>
      </div>
    </div>
    <div class="title">
      <div class="centerTitlebox">
        <div v-for="(item, index) in menuList" :key="index" class="titleTxt" :class="actIndex == index ? 'act' : ''"
             @mouseenter="enter(index)" @mouseleave="leave()" @click="actIndexOne(index)"
        >
          <router-link :to="item.route">
            {{ $t(item.title) }}
          </router-link>
          <div v-for="(ele, inde) in item.children" v-show="item.isHow" :key="inde" class="titleTxt_One"
               @click="GetPutrouter(item, ele)"
          >
            <div class="livnk">
              {{ ele.barseName }}
            </div>
            <!-- <router-link :to="item.route"> </router-link> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { Message } from "element-ui";
// import { query } from '@/api/home'
import { MainMenu } from '@/router'

export default {
  name: 'Header',
  // inject: ['reload'],
  data() {
    return {
      MainMenu,
      isHowIndex: 0,
      actIndex: localStorage.getItem('actindex'),
      title: '',
      menuList: [
        {
          route: '/home',
          title: 'menu.home',
          isHow: false
        },
        {
          route: '/product',
          title: 'menu.product',
          isHow: false,
          titleOne: [
            { barseName: 2, show: 0 },
            { barseName: 2, show: 1 },
            { barseName: 2, show: 2 },
            { barseName: 2, show: 3 },
            { barseName: 2, show: 4 }
          ]
        },
        {
          route: '/about',
          title: 'menu.about',
          isHow: false,
          titleOne: [
            // { barseName: this.$t('About.consulting'), show: 0 },
            // { barseName: this.$t('About.memberCase'), show: 1 },
            // { barseName: this.$t('About.alliance'), show: 2 }
          ]
        },
        {
          route: '/expert',
          title: 'menu.expert',

          isHow: false
          // titleOne: ["A", "b", "c"]
        },
        {
          route: '/activity',
          isHow: false,
          title: 'menu.activity'
        },
        {
          route: '/userwe',
          isHow: false,
          title: 'menu.userwe',
          titleOne: [
            // { barseName: this.$t('userwe.consultingAct'), show: 0 },
            // { barseName: this.$t('userwe.consulting'), show: 1 },
            // { barseName: this.$t('userwe.memberCase'), show: 2 },
            // { barseName: this.$t('userwe.activity'), show: 3 },
            // { barseName: this.$t('userwe.ContactCenter'), show: 4 },
            // { barseName: this.$t('userwe.Contact'), show: 5 }
          ]
        }
      ]
    }
  },
  watch: {},
  created() {

  },
  methods: {
    GetPutrouter() {

    },
    actIndexOne(v) {
      this.actIndex = v
      // localStorage.setItem("actindex", v);
    },
    leave() {
      this.menuList[this.isHowIndex].isHow = false
    },
    enter(v) {
      this.isHowIndex = v
      this.menuList[v].isHow = true
    },
    // 搜索
    queryRet() {

      // console.log(this.inputName);
    },
    // 中英文切换
    languageGetPut(v) {
      if (v === 1) {
        localStorage.setItem('englishFlag', 1)
        this.$i18n.locale = 'zh'
        // this.reload()
      } else {
        localStorage.setItem('englishFlag', 0)
        this.$i18n.locale = 'en'
        // this.reload()
      }
    }
  }
}
</script>

<style scoped type="text/less" lang="less">
input::-webkit-input-placeholder {
  color: #c9cfd8;
}

.centerBox {
  min-width: 1700px;
  background-color: #fff;
  position: relative;
}

.centerLogo {
  width: 1200px;
  height: 120px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;

  .logo_left {
    display: flex;
    padding: 36px 0;
    height: 52px;

    .logo_Name {
      width: 400px;

      p {
        padding-left: 5px;
        padding-top: 18px;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        font-weight: 600;
        margin: 0;
        vertical-align: text-bottom;
        color: #1b5f90;
        font-size: 28px;
      }
    }
  }

  .searchFromBox {
    padding-top: 15px;

    .language {
      display: flex;
      justify-content: flex-end;

      .languageAct {
        cursor: pointer;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
      }

      div {
        height: 12px;
        font-family: SourceHanSansCN-Regular;
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #989ca3;
      }
    }
  }

  .searchFrom {
    padding: 20px 0 36px 0;
    display: flex;
    align-items: center;

    .searchFromInput {
      width: 310px;
      outline: none;
      padding: 0 0 0 10px;
      height: 38px;
      line-height: 38px;
      font-size: 16px;
      background-color: #ffffff;
      border: solid 1px #c9cfd8;
    }

    .buTton {
      border: none;
      outline: none;
      width: 90px;
      height: 40px;
      background-color: #a02523;
      // margin-top: ;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }
}

.title {
  height: 50px;
  background-color: #1b5f90;

  .centerTitlebox {
    position: relative;
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    z-index: 99;
    background-color: #1b5f90;
    display: flex;
  }

  .titleTxt {
    cursor: pointer;
    width: 200px;
    height: 50px;
    line-height: 50px;

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      // border: none;
      text-decoration: none;
      font-family: SourceHanSansCN-Regular;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
    }

    transition: all 0.2s linear;
  }

  .act {
    background-color: #2d79b1;
  }

  .titleTxt:hover {
    background-color: #2d79b1;
  }

  .titleTxt_One {
    display: flex;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #cce6f7;
    font-weight: 500;
    border-bottom: 1px #9fd0f0 solid;
    transition: all 0.5s linear;

    .livnk {
      font-size: 14px;
      color: #1b5f90;
      line-height: 35px;
    }
  }

  .titleTxt_One .livnk:hover {
    color: #a12524;
  }
}
</style>
